<script setup>
import { ref } from 'vue'

/*
 定义响应式数据 
   reactive ： 针对复杂数据类型转换为响应式
   注意点： reactive(只能是复杂数据类型的数据)
   ref :可以定义任意类型数据为响应式
   语法：
     1:导入 import {ref} from 'vue'
     2:定义  const xxx = ref(10) =====> {value:10}
     3:访问和修改： xxx.value
   html使用：不需要使用.value
   js使用:一定要写.value

  没有限制，实际开发用ref的更多，复杂数据用reactive  简单数据与不确定类型的数据用ref


*/
const num = ref(999)
const add = () => {
  num.value++
  console.log(num)
}
</script>

<template>
  <div class="app-page">{{ num }}</div>
  <button @click="num++">html点击++</button>
  <button @click="add">js点击++</button>
</template>

<style scoped></style>
